<template>
  <el-row>
    <!-- 头部 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <el-breadcrumb :separator-icon="ArrowRightBold">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>设置中心</el-breadcrumb-item>
          <el-breadcrumb-item>红包单控群控配置</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
    </el-col>
    <div style="padding: 5px;"></div>
    <!-- 内容区域 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <div style="margin-bottom: 20px;">
          <el-alert title="参数设置" type="success" :closable="false"></el-alert>
        </div>

        <!-- 表格 -->
        <el-form label-width="180px" label-position="right" style="width: 80%;">

          <el-form-item label="接龙群控范围">
            <el-input type="text" v-model="formData.jl_group"/>
            <span style="color:#999">概率0-100，概率越大，获得大红包几率越大</span>
          </el-form-item>
          <el-form-item label="接龙单控uid">
            <el-input type="text" v-model="formData.jl_alone_uid"/>
            <span style="color:#999">用户uid,多用户用,号隔开如w67a9bac89449e, w68578d6cef2f8</span>
          </el-form-item>
          <el-form-item label="接龙单控范围">
            <el-input type="text" v-model="formData.jl_alone_value"/>
            <span style="color:#999">概率0-100，概率越大，获得大红包几率越大</span>
          </el-form-item>

          <el-form-item label="28杠群控范围">
            <el-input type="text" v-model="formData.group_28"/>
            <span style="color:#999">概率0-100，概率越大，获得大红包几率越大</span>
          </el-form-item>
          <el-form-item label="28杠单控uid">
            <el-input type="text" v-model="formData.alone_28_uid"/>
            <span style="color:#999">用户uid,多用户用,号隔开如w67a9bac89449e, w68578d6cef2f8</span>
          </el-form-item>
          <el-form-item label="28杠单控范围">
            <el-input type="text" v-model="formData.alone_28_value"/>
            <span style="color:#999">概率0-100，概率越大，获得大红包几率越大</span>
          </el-form-item>
          <el-form-item label="扫雷群控范围">
            <el-input type="text" v-model="formData.lei_group"/>
            <span style="color:#999">概率0-100，概率越大，获得大红包几率越大</span>
          </el-form-item>
          <el-form-item label="扫雷单控uid">
            <el-input type="text" v-model="formData.lei_alone_uid"/>
            <span style="color:#999">用户uid,多用户用,号隔开如w67a9bac89449e, w68578d6cef2f8</span>
          </el-form-item>
          <el-form-item label="扫雷单控范围">
            <el-input type="text" v-model="formData.lei_alone_value"/>
            <span style="color:#999">概率0-100，概率越大，获得大红包几率越大</span>
          </el-form-item>
          <el-form-item label="牛牛群控范围">
            <el-input type="text" v-model="formData.niu_group"/>
            <span style="color:#999">概率0-100，概率越大，获得大红包几率越大</span>
          </el-form-item>
          <el-form-item label="牛牛单控uid">
            <el-input type="text" v-model="formData.niu_alone_uid"/>
            <span style="color:#999">用户uid,多用户用,号隔开如w67a9bac89449e, w68578d6cef2f8</span>
          </el-form-item>
          <el-form-item label="牛牛单控范围">
            <el-input type="text" v-model="formData.niu_alone_value"/>
            <span style="color:#999">概率0-100，概率越大，获得大红包几率越大</span>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm">保存设置</el-button>
          </el-form-item>
        </el-form>

        <!-- 分页 -->
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>

import {ref, reactive, onMounted, inject, getCurrentInstance} from 'vue'
import {success, error} from '@/common/tool/message.js'
import {request_post} from '@/common/axios/request.js'
import {ArrowRightBold} from '@element-plus/icons-vue'

const {proxy} = getCurrentInstance();
const imgData = reactive({list: []})


// 用于显示的响应式对象
const formData = reactive({
  jl_group:null,
  jl_alone_uid:null,
  jl_alone_value:null,
  group_28:null,
  alone_28_uid:null,
  alone_28_value:null,
  lei_group:null,
  lei_alone_uid:null,
  lei_alone_value:null,
  niu_group:null,
  niu_alone_uid:null,
  niu_alone_value:null
})

onMounted(() => {
  adminConfigIndex()
})


function submitForm() {
  adminConfigCreate()
}


/**
 * 对敏感信息进行脱敏处理
 * @param {string} value - 原始值
 * @returns {string} 脱敏后的值，格式为"前2位+****+后2位"
 */
function maskSensitiveInfo(value) {
  return value ? value.substring(0, 4) + '**********' + value.slice(-4) : ''
}


function adminConfigIndex() {
  request_post('/admin_red_envelope_setting').then(res => {
    if (res.data.code == 200) {
      // 更新原始值和显示值
      for (const key in res.data.data) {
        if (key in formData) {
          formData[key] =  res.data.data[key]
        }
      }


    } else {
      return error(res.data.msg)
    }
  })
}

// 添加配置
function adminConfigCreate() {

  request_post('/admin_red_envelope_setting_create', formData).then(res => {
    location.reload()
    if (res.data.code == 200) {

      return success(res.data.msg)

    } else {
      return error(res.data.msg)
    }

  })
}


function deleteUrl(index) {
  imgData.list.splice(index, 1)
}

const imageModel = inject('showImageModel')
const imageUrlArray = ref(inject('imageUrlArray'))

// 图片上传
function ImageUpload() {
  imageModel()
  imgData.list = imageUrlArray
}

</script>

<style></style>
